<template>

	<nav-header title="公司相册">
		<template v-slot:right>
			<view class="nav-edit"
				@click="goPage(`/pageSubOne/business-chat/business-album-edit?companyId=${companyId}`)">
				<text>编辑</text>
			</view>
		</template>
	</nav-header>
	<view class="content">


		<list-contacts status="contact" type="confirmbar" :info="info" @click="expand"></list-contacts>
		<!-- <view class="header">
			<text>共{{ imgList.length }}张照片</text>
			<view>
				<text>剩余数量：{{ imgList.length }}/30</text>
				<text class="expandText" @click="expand">扩容</text>
			</view>
		</view> -->
		<scroll-view style="height: 70vh;" scroll-y="true" refresher-enabled="true" :refresher-triggered="triggered"
			:refresher-threshold="100" @refresherrefresh="onRefresh" @refresherrestore="onRestore">
			<view v-if="imgList.length==0">
				<up-empty :icon="getResource('/icon/empty-message.svg')" text="暂无数据">
				</up-empty>
			</view>

			<view class="imgList" scroll-y="true" v-else>
				<view v-for="(item, index) in imgList" class="image-container">
					<up-image :show-loading="true" :src="item.picture" width="222rpx" height="222rpx"
						@click="previewImage(index)"></up-image>
					<!-- <image :src="item.picture" mode="aspectFit" alt="" class="group-img" @click="previewImage(index)" /> -->
					<view class="checkbox">
						<up-checkbox-group>
							<up-checkbox v-if="showDelete" activeBackgroundColor="#2970FF" iconColor="#ffffff"
								:checked="item.checked" @change="toggleCheck(index)" />
						</up-checkbox-group>
					</view>
				</view>

				<image-upload :onSuccess="onUnloadImageSuccess" :maxCount="9">
					<view class="pic-add">
						<view class="box">
							<svg-icon icon="plus" :width="48"></svg-icon>
							<text class="text-xs-Regular">上传照片</text>
						</view>
					</view>
				</image-upload>
			</view>
		</scroll-view>


	</view>
	<view v-if="imgList.length>0">
		<view class="imgEdit" v-if="!showDelete" @tap="changeShow">
			<view>
				<button class="plainColor">
					<text class="text-xs-Medium">批量操作</text>
				</button>
			</view>
		</view>

		<view class="imgEditDoing" v-else>
			<view style="flex: 1;">
				<view class="text-sm-Regular" style="display: flex;align-items: center;">
					<up-checkbox-group>
						<up-checkbox :checked="allChecked" activeBackgroundColor="#2970FF" iconColor="#ffffff"
							@change="selectAll"></up-checkbox>
					</up-checkbox-group>
					<text @tap.stop="selectAll">全选</text>
					<text style="color: #2970FF;">（已选择：{{ selectedImagesCount }}张）</text>
				</view>
			</view>
			<view>
				<button class="plainColor" @tap="clearSelection">
					<text class="text-xs-Medium">取消操作</text>
				</button>
			</view>
			<view>
				<button class="btnColor" @tap="confirmDelete">
					<text class="text-xs-Medium">确认删除</text>
				</button>
			</view>
		</view>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				imgList: [],
				triggered: false,
				info: {},
				showDelete: false,
				selectedImages: []
			};
		},
		props: {
			companyId: {
				type: Number,
			}
		},
		computed: {
			selectedImagesCount() {
				return this.imgList.filter(img => img.checked).length;
			},
			allChecked() {
				return this.imgList.every(img => img.checked);
			}
		},
		methods: {
			previewImage(index) {
				const img = this.imgList.map(item => item.picture); // 提取所有图片的 URL
				uni.previewImage({
					urls: img,
					current: img[index] // 设置当前显示的图片
				});
			},
			onUnloadImageSuccess(file, res) {
				this.$http({
					url: '/company/picture',
					method: "post",
					data: {
						companyId: this.companyId,
						picture: res.data.originUrl
					}
				}).then(res => {
					uni.showToast({
						title: "上传成功",
						icon: "none"
					})
					this.onRefresh()
				})
			},
			changeShow() {
				this.showDelete = true
			},
			expand() {
				console.log("扩容");
			},
			onRefresh() {
				this.$http({
					url: `/company/picture/list/${this.companyId}`,
					method: "get",
				}).then(res => {
					this.imgList = res.list
					this.triggered = false;
					this.info = {
						title: "照片已使用",
						select: this.imgList.length,
						size: 30,
						unit: "张",
						btext: "扩容照片"
					}
				})
			},
			onRestore() {
				console.log("onRestore");
				this.triggered = 'restore'; // 需要重置
			},
			expand() {
				console.log("扩容")
			},
			toggleCheck(index) {
				this.imgList[index].checked = !this.imgList[index].checked;
			},
			selectAll() {
				const allChecked = this.allChecked;
				this.imgList.forEach(img => {
					img.checked = !allChecked;
				});
			},
			clearSelection() {
				this.imgList.forEach(img => {
					img.checked = false;
				});
				this.selectedImages = [];
				this.showDelete = false
			},
			confirmDelete() {
				const selectedImages = this.imgList.filter(img => img.checked);
				if (selectedImages.length > 0) {
					uni.showModal({
						title: '是否确认删除',
						content: '是否删除选中照片，删除后无法恢复，请谨慎操作',
						success: (res) => {
							if (res.confirm) {
								let ids = selectedImages.map(img => img.id)
								this.$http({
									url: `/company/picture/${ids}`,
									method: "POST",
								}).then(() => {
									uni.showToast({
										title: "删除成功",
										icon: "none"
									})
									this.imgList = this.imgList.filter(img => !selectedImages.includes(
										img));
									this.selectedImages = [];
									this.onRefresh()
									this.showDelete = false;
								});
							}
						}
					})
				} else {
					uni.showToast({
						title: "请选择要删除的图片",
						icon: "none"
					})
				}
			}
		},
		mounted() {
			this.triggered = true;
		}
	};
</script>

<style lang="scss" scoped>
	.content {
		widows: 100%;
		padding: 20rpx;

		.nav-edit {
			text-align: right;
		}

	}

	.header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 30rpx;
		color: #616161;
	}

	.pic-add {
		background-color: $gray-100;
		width: 222rpx;
		height: 222rpx;
		border-radius: 16rpx;
		grid-row: span 1;
		/* 确保上传按钮占据一个单元格 */

		.box {
			width: 100%;
			height: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
			gap: 16rpx;
		}
	}

	.expandText {
		color: #d90000;
		margin-left: 20rpx;
	}

	.imgList {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(111px, 1fr));
		grid-gap: 8rpx;
		justify-content: center;
		align-items: center;
		margin-top: 30rpx;
	}

	.image-container {
		position: relative;
	}

	.checkbox {
		position: absolute;
		top: 10rpx;
		right: 10rpx;
		z-index: 1;
	}

	.imgEdit {
		width: 100%;
		position: fixed;
		bottom: 0;
		right: 0;
		height: 92rpx;
		padding: 10rpx 20rpx 42rpx 20rpx;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		border-top: 1rpx solid $gray-200;

		.plainColor {
			width: 148rpx;
			border: 1rpx solid $brand-500;
			border-radius: 34rpx;
			color: $brand-500;
			padding: 8rpx 24rpx;
			text-align: center;
			line-height: 28rpx;
		}
	}

	.imgEditDoing {
		width: 95%;
		position: fixed;
		bottom: 0;
		left: 0;
		height: 92rpx;
		padding: 10rpx 60rpx 42rpx 20rpx;
		display: flex;
		align-items: center;
		gap: 16rpx;
		border-top: 1rpx solid $gray-200;

		.plainColor {
			width: 148rpx;
			border: 1rpx solid $brand-500;
			border-radius: 34rpx;
			color: $brand-500;
			padding: 8rpx 24rpx;
			text-align: center;
			line-height: 28rpx;
		}

		.btnColor {
			width: 148rpx;
			background-color: $error-500;
			border-radius: 34rpx;
			color: $white;
			padding: 8rpx 24rpx;
			text-align: center;
			line-height: 28rpx;
		}
	}

	.group-img {
		width: 155rpx;
		height: 155rpx;
		padding: 5rpx;
	}
</style>